<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="applicable-device" content="mobile" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            body {
                background: rgba(0, 0, 0, 0.8);
                /* max-width:750px; */
                overflow-x: hidden;
                font-size: 0.22rem;
                font-family: 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', 'Hiragino Sans GB', Helvetica, Arial,
                    'Lucida Grande', sans-serif !important;
            }
            .leftright {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                text-align: justify;
                position: relative;
            }

            a {
                text-decoration: none;
            }
            .form {
                width: 80%;
                margin: 2rem auto;
            }
            .form-item {
                padding: 0.1rem 0;
                margin-bottom: 0.2rem;
                position: relative;
                background: rgba(255, 255, 255, 0.2);
                color: #eee;
                border-bottom: rgba(255, 255, 255, 0.2);
            }
            .label {
                position: absolute;
                transform: translate(50%,50%);
            }
            .input {
                border: none;
                outline: none;
                display: inline-block;
                width: 75%;
                height: 0.6rem;
                line-height: 0.6rem;
                padding: 0 0.08rem;
                background: none;
                color: #eee;
            }
            .code .input {
                width: 48%;
            }
            .code-btn {
                position: absolute;
                text-decoration: underline;
                color: #eee;
                transform: translate(50%,50%);
                right: 0.75rem;
                letter-spacing: 0.01rem;
            }
            .form-extra,
            .login-btn,
            .mark-text {
                color: #eee;
            }
            .form-btn {
                margin: 0.6rem auto 0.2rem;
                color: #fff;
                background: mediumaquamarine;
                height: 0.8rem;
                line-height: 0.8rem;
                text-align: center;
                letter-spacing: 0.02rem;
                border-radius: 0.08rem;
            }
            .form-checkbox,
            .mark-text {
                display: inline-block;
                vertical-align: middle;
            }
            .form-bot .mark-text {
                color: mediumaquamarine;
            }
        </style>

        <script>
            +(function () {
                remLayout();

                function remLayout() {
                    var w = document.documentElement.clientWidth;
                    w = w > 768 ? 768 : w;
                    w = w <= 320 ? 320 : w;
                    document.documentElement.style.fontSize = w / 7.5 + 'px';
                }
                window.addEventListener(
                    'resize',
                    function () {
                        remLayout();
                    },
                    false
                );
            })();
        </script>
    </head>

    <body>
        <form class="form">
            <div class="form-item">
                <label for="" class="label">手机号：</label>
                <input class="input" type="text" />
            </div>
            <div class="form-item code">
                <label for="" class="label">验证码：</label>
                <input class="input" type="text" />
                <a class="code-btn" href="javascript:;">获取验证码</a>
            </div>
            <div class="form-item">
                <label for="" class="label">设置密码：</label>
                <input class="input" type="text" />
            </div>
            <div class="form-extra leftright">
                <label for="" class="extra-item">
                    <input class="form-checkbox" type="checkbox" />
                    <span class="mark-text">记住密码</span>
                </label>
                <div class="extra-item">
                    <a href="/login" class="login-btn">已有帐号登录</a>
                </div>
            </div>
            <div class="form-btn">注册</div>
            <label for="" class="form-bot">
                <input class="form-checkbox" type="checkbox" />
                <span class="mark-text">阅读并同意sport相关协议条款</span>
            </label>
        </form>
    </body>
</html>
